<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="普通" name="index1">
      <div class="grid">
        <div v-for="(item, index) in svgIcons" :key="index" class="flex">
          <svg-icon :icon-class="item" class="item" @click="checkTrue(item)" />
          <p>{{ item }}</p>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="饿了么" name="index2">
      <div class="grid">
        <div v-for="(item, index) in elementIcons" :key="index" class="flex">
          <i :class="'el-icon-' + item" style="font-size: 35px;margin-bottom: 10px" @click="checkTrue('el-icon-' + item)"/>
          <span>{{ item }}</span>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import svgIcons from "./svgIcons";
import elementIcons from "./element-icons";
export default {
  created() {},
  data() {
    return {
      svgIcons,
      elementIcons,
      activeName: "index1"
    };
  },
  methods: {
    generateIconCode(symbol) {
      return `<svg-icon icon-class="${symbol}" />`;
    },
    checkTrue(item) {
      this.$emit("editIcon", item);
    }
  }
};
</script>

<style lang="scss" scoped>
.grid {
  position: relative;
  display: grid;
  height: 300px;
  overflow-y: scroll;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 10px 10px;
  .flex {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    &:hover {
      cursor: pointer;
    }
  }
  .item {
    width: 30px;
    height: 30px;
  }
}
</style>
